<template>
  <div>
    <a-card class="patient-card" :bordered="false">
      <page-view :title="title">
        <detail-list title="病房信息">
          <detail-list-item term="病房号">{{ data.number }}</detail-list-item>
          <detail-list-item term="总床位">{{ data.count }}</detail-list-item>
          <detail-list-item term="科室">{{ departmentFilter(data.department) }}</detail-list-item>
          <detail-list-item term="护士">{{ data.nurse }}</detail-list-item>
        </detail-list>
      </page-view>
    </a-card>
    <a-card title="病人信息">
      <a-table
        :columns="columns"
        :dataSource="patients"
        size="middle"
        rowKey="bed"
        @change="onChange()"
        :loading="loading">
        <span slot="state" slot-scope="text,record">
          <a-tag :color="record.state === 0 || record.state === '0' ? 'geekblue' : 'green'">
            {{ record.state === 0 ? '已出院' : '住院中' }}
          </a-tag>
        </span>
        <span slot="adviceState" slot-scope="text,record">
          <a-tag :color="record.adviceState | colorFilter">
            {{ record.adviceState | stateFilter }}
          </a-tag>
        </span>
      </a-table>
      <!-- <a-divider style="margin-bottom: 32px"/> -->
      <a-button type="primary" style="margin-left: 8px" @click="goBack()">返回</a-button>
    </a-card>

  </div>
</template>

<script>
import { PageView } from '@/layouts'
import DetailList from '@/components/tools/DetailList'
import { departmentFilter } from '../../dictionary'
import { getWard } from '../../api/ward'
// import { getPatientByWard } from '../../api/patient'
const DetailListItem = DetailList.Item
const columns = [{
  title: '床位',
  dataIndex: 'bed',
  align: 'center',
  scopedSlots: { customRender: 'bed' }
}, {
  title: '姓名',
  dataIndex: 'name',
  align: 'center',
  scopedSlots: { customRender: 'name' }
}, {
  title: '年龄',
  dataIndex: 'age',
  align: 'center',
  scopedSlots: { customRender: 'age' }
}, {
  title: '性别',
  dataIndex: 'gender',
  align: 'center',
  scopedSlots: { customRender: 'gender' },
  customRender: (gender) => gender === 0 || gender === '0' ? '男' : '女'
}, {
  title: '状态',
  dataIndex: 'state',
  align: 'center',
  scopedSlots: { customRender: 'state' },
  onFilter: (value, record) => record.state === value
}, {
  title: '入院日期',
  dataIndex: 'comeDate',
  align: 'center',
  scopedSlots: { customRender: 'comeDate' }
},
{
  title: '住院部门',
  dataIndex: 'department',
  align: 'center',
  scopedSlots: { customRender: 'department' },
  customRender: departmentFilter
}, {
  title: '医嘱状态',
  dataIndex: 'adviceState',
  align: 'center',
  scopedSlots: { customRender: 'adviceState' }
}]

export default {
  name: 'ShowWard',
  data () {
    return {
      ward: '',
      columns,
      data: {},
      patients: [],
      patientList: [],
      user: this.$store.getters.userInfo
    }
  },
  components: {
    PageView,
    DetailList,
    DetailListItem
  },
  computed: {
    title () {
      return this.$route.meta.title
    }
  },
  methods: {
    initValue () {
      getWard(this.ward).then(res => {
        console.log('ward', res.result)
        this.data = res.result
        console.log('data', this.data)
        this.patients = this.data.patients
        console.log('patients', this.patients)
      })
    },
    goBack () {
      this.$router.push('/ward/index')
    },
    departmentFilter
  },
  filters: {
    departmentFilter,
    colorFilter (value) {
      switch (value) {
        case 1 : return 'red'
        case 2 : return 'blue'
        case 3 : return 'green'
        default: return 'gray'
      }
    },
    stateFilter (value) {
      switch (value) {
        case 1 : return '等待核对'
        case 2 : return '等待取药'
        case 3 : return '等待执行'
        default: return '已完成'
      }
    }
  },
  mounted () {
    this.ward = this.$route.query.ward
    if (this.ward === null || this.ward === undefined) {
      this.$router.push('/ward/index')
    } else {
      this.initValue()
    }
  }
}
</script>

<style scoped>
  .title {
    color: rgba(0,0,0,.85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .patient-card {
    margin-bottom: 20px;
  }
</style>
